<template>
	<view class="pagesBox">
		<!-- 轮播图 -->
		<view class="swiperBox">
			<swiper circular autoplay :indicator-dots="false" :style="{height: carouselHeight+'px'}">
				<swiper-item v-for="(item,index) in detailObj.images" :key="index">
					<image :src="item" mode="widthFix" style="width:100%;height: 480rpx;border-radius: 12rpx;font-size: 0%;" @load="adaptCarouselHeight"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 商品名称 -->
		<view class="goodsInfoBox">
			<view class="goodsInfoTop">
				<view class="goodsMoney">
					<view class="money2">
						<text style="font-size: 24rpx;">￥</text>
						{{detailObj.money || '0.00'}}
					</view>
					<!-- <view class="money1">{{detailObj.original_price || '0.00'}}</view> -->
				</view>
				<view class="goodsSale">已售{{detailObj.sale || 0}}件</view>
			</view>
			<view class="goodsName">
				{{detailObj.name || ''}}
				<!-- <view class="shareBox">
					<u-icon name="zhuanfa" @click="toShare" color="#A1A5AA" size="42"></u-icon>
				</view> -->
			</view>
			<!-- <view class="goodsInfoTop" v-if="detailObj.original_price && detailObj.original_price * 1">
				<view class="goodsMoney">
					<view class="money1">原价:￥{{detailObj.original_price || '0.00'}}</view>
				</view>
			</view> -->
		</view>
		<!-- 商品参数 -->
		<view class="goodsDetailBox">
			<u-section v-if="detailObj.detail" title="商品展示" color="#000" font-size="32" :show-line="false" :right="false"></u-section>
		</view>
		<rich-text :nodes="detailObj.detail"></rich-text>
		<view style="height: calc(135rpx + env(safe-area-inset-bottom));"></view>
		<view class="submitBox">
			<button open-type="contact" class="kefuBox">
				<image  :src="`${baseUrl}/static/my/icon05.png`" style="width: 40rpx;height: 40rpx;"></image>
				<text class="kefu">客服</text>
			</button>
			<view class="buyBtn" hover-class="btnHover" @click="showBuy = true">立即购买</view>
		</view>
		<u-popup v-model="showBuy" mode="bottom" border-radius="14">
			<view class="goodsBuyBox">
				<view class="goodsInfoPopupBox">
					<view class="goodsImage"><image :src="detailObj.images[0]" style="width: 192rpx;height: 192rpx;"></image></view>
					<view class="goodsInfoDetail">
						<view class="goodsInfoName u-line-2">{{detailObj.name || ''}}</view>
						<view class="goodsInfoMoney">
							<view class="money2">￥{{detailObj.spec[specIndex].price || ""}}</view>
						</view>
						<view class="goodsInfoStock">库存：{{detailObj.stock || ""}}</view>
					</view>
				</view>
				<view class="scrollView">
					<view class="popupLine">
						<view class="lineTitle">数量</view>
						<view class="lineMain"><u-number-box v-model="params.num" :min="1" :input-width="100" :input-height="60"></u-number-box></view>
					</view>
					<view class="title" v-if="detailObj.spec && detailObj.spec.length">规格分类</view>
					<view class="specBox" v-if="detailObj.spec && detailObj.spec.length">
						<block v-for="(item,index) in detailObj.spec" :key="index">
							<view :class="['specItem',index == specIndex ? 'active':'']" @click="changeSpec(item,index)">
								<view class="specImage" v-if="item.image"><image :src="item.image" style="width: 64rpx;height: 64rpx;"></image></view>
								<view class="specContent">{{item.name}}</view>
							</view>
						</block>
					</view>
				</view>
				<view style="height: calc(135rpx + env(safe-area-inset-bottom));"></view>
				<view class="submitBox">
					<button open-type="contact" class="kefuBox">
						<image  :src="`${baseUrl}/static/my/icon05.png`" style="width: 40rpx;height: 40rpx;"></image>
						<text class="kefu">客服</text>
					</button>
					<view class="buyBtn" hover-class="btnHover" @click="toConfirm">立即购买</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showPosters" mode="center" border-radius="14">
			<view class="postersBox">
				<view style="position: relative;">
					<l-painter ref="painter" is-canvas-to-temp-file-path css="display:flex;justify-content: center;" @fail="imageFail" @success="getImage">
						<l-painter-view css="width: 500rpx;background: #fff;position: relative;">
							<!-- 头部 -->
							<l-painter-view css="padding:8rpx;display:flex;align-items: center;">
								<l-painter-view>
									<l-painter-image :src="userInfo.avatar_image" css="width:80rpx;height:80rpx;border-radius: 50%;"></l-painter-image>
								</l-painter-view>
								<l-painter-view css="margin-left:16rpx;">
									<l-painter-text :text="userInfo.namePosters"/>
								</l-painter-view>
							</l-painter-view>
							<!-- 商品图片 -->
							<l-painter-view>
								<l-painter-image :src="detailObj.images[0]" css="width:500rpx;"></l-painter-image>
							</l-painter-view>
							<!-- 详情 -->
							<!-- 价格 -->
							<l-painter-view css="width:300rpx;min-height:60rpx;margin-left:16rpx;margin-top:16rpx;">
								<l-painter-text :text="'￥'+detailObj.money" css="color:#cf7154;font-size:36rpx;"/>
							</l-painter-view>
							<!-- 历史价格 -->
							<!-- <l-painter-view css="width:300rpx;margin-left:16rpx;">
								<l-painter-text :text="'￥'+detailObj.original_price" css="color:#aaa;text-decoration: line-through;"/>
							</l-painter-view> -->
							<!-- 商品名称 -->
							<l-painter-view css="width:300rpx;min-height:130rpx;margin-left:16rpx;margin-bottom:8rpx;">
								<l-painter-text :text="detailObj.name" css="line-clamp: 2; padding-top: 32rpx; color:#000;"/>
							</l-painter-view>
							<l-painter-view css="position: absolute;bottom:38rpx;right:16rpx;margin-left:16rpx">
								<l-painter-image :src="codePng" css="width:160rpx;height:160rpx;border-radius: 50%;"></l-painter-image>
								
							</l-painter-view>
							<l-painter-view css="height:30rpx;position: absolute;bottom:8rpx;right:16rpx;margin-left:8rpx;font-size:24rpx;">
								<l-painter-text text="长按或扫描查看" css="color:#aaa;font-size:22rpx;"/>
							</l-painter-view>
						</l-painter-view>
					</l-painter>
					<view style="position: absolute;z-index: 999;top: 0%;left: 0%;bottom: 0;right: 0%;">
						<image :src="previewImage" mode="widthFix" style="width: 500rpx;"></image>
					</view>
				</view>
				<view style="height: 160rpx;"></view>
				<view class="postersBottom">
					<view class="menuBox2">
						<block v-for="(item,index) in menuList" :key="index">
							<view class="menuItem2" v-if="item.title != '分享给好友'" @click="menuHandle(item)">
								<view class="imageBox2"><image :src="item.icon" style="width: 90rpx;height: 90rpx;"></image></view>
								<view class="menuText2">{{item.title}}</view>
							</view>
							<button class="menuItem2" open-type="share" :id="shareuid" v-if="item.title == '分享给好友'">
								<view class="imageBox2"><image :src="item.icon" style="width: 90rpx;height: 90rpx;"></image></view>
								<view class="menuText2">{{item.title}}</view>
							</button>
						</block>
					</view>
					<view class="cancalBox" @click="showPosters = false">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { isLogin } from "../../mixins/isLogin.js"
	import { isUpdateNew } from "../../mixins/isUpdateNew.js"
	export default {
		mixins:[isLogin,isUpdateNew],
		data() {
			return {
				baseUrl:this.$baseUrl,
				inputStyle:{color:'#000',background:'#fff',borderRadius:'6rpx',fontSize: '32rpx'},
				// 轮播图自适应高度
				carouselHeight:'200',
				detailObj:{},
				// 轮播图信息
				swiperInfo:[],
				detailContent:'',
				// 购买弹窗
				showBuy:false,
				params:{
					goods_id:'',
					num:1,
					spec:''
				},
				specIndex:0,
				showQrcode:false,
				qrcodeNo:'',
				time:'',
				// 用户身份
				identity:0,
				// 海报
				showPosters:false,
				codePng:"",
				// 照片临时路径
				previewImage:"",
				shareuid:"",
				userInfo:{},
				menuList: [
					{icon: this.$baseUrl+"/static/index/icon02.png",title: "分享给好友",isShow:true},
					{icon: this.$baseUrl+"/static/index/icon03.png",title: "预览发图",isShow:true},
					{icon: this.$baseUrl+"/static/index/icon04.png",title: "保存海报",isShow:true},
				],
			};
		},
		onLoad(options) {
			if(options.uid){
				uni.setStorageSync('shareuid',options.uid)
			}
			this.params.goods_id = options.id;
		},
		onShow() {
			this.updateNew();
			this.getUserInfo();
			this.getOrderList();
			this.getDetail(this.params.goods_id);
			if(uni.getStorageSync("uid")){
				this.shareuid = uni.getStorageSync("uid");
			}
		},
		methods:{
			imageFail(e){
				console.log("获取图片失败",e);
			},
			getImage(e){
				// console.log("获取图片",e);
				this.previewImage = e;
			},
			// 在这里用主要是为了验证token是否过期或是否是登录状态
			async getOrderList(){
				let res = await uni.$http('POST','order/list',{limit:1});
				if(res.msg.includes('登录')){
					uni.removeStorageSync("token");
				}
			},
			async getUserInfo(){
				let res = await uni.$http('POST','user/userInfo');
				console.log("用户信息",res);
				if(res.code == 1){
					this.identity = res.data.identity;
					res.data.namePosters = res.data.nick_name + "\n精选好物为您推荐~"
					this.userInfo = res.data;
				}
			},
			async getDetail(id){
				let res = await uni.$http('POST','goods/detail',{id});
				console.log("商品详情",res);
				if(res.code == 1){
					this.detailObj = res.data;
					if(res.data.spec != null && res.data.spec.length != 0){
						this.params.spec = res.data.spec[this.specIndex].name;
					}else{
						res.data.spec = []
					}
					res.data.detail = res.data.detail.replaceAll('width: 100%;','width:100%;height:auto;vertical-align:middle;')
					res.data.detail = res.data.detail.replaceAll('<img','<img style="width:100%;height:auto;vertical-align:middle;"')
					if (res.data.detail.indexOf('<p><img') > -1) {
						res.data.detail = res.data.detail.replaceAll('<p><img', '<p style="font-size:0px;"><img')
					}
					this.detailObj = res.data;
					this.getQrcode()
				}else if(res.msg.includes('登录')){
					uni.removeStorageSync('token');
				}else{
					uni.$u.toast(res.msg)
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			},
			async getQrcode() {
				let res = await uni.$http('POST','qrcode/getQrcode',{id:this.detailObj.id});
				console.log('海报',res);
				if(res.code == 1){
					this.codePng = res.data.qrcode_url;
				}
			},
			menuHandle(item){
				if(item.title == "预览发图"){
					uni.previewImage({
						urls: [this.previewImage],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				}else if(item.title == "保存海报"){
					// var imgSrc = this.previewImage//base64编码
					// var number = Math.random()
					// wx.getFileSystemManager().writeFile({
					// 	filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
					// 	data: imgSrc,
					// 	encoding: 'base64',
					// 	success: res => {
					// 		wx.saveImageToPhotosAlbum({
					// 		  filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
					// 		  success: function (res) {
					// 			wx.showToast({ title: '保存成功', })
					// 		  },
					// 		  fail: function (err) {
					// 			console.log(err)
					// 		  }
					// 		})
					// 		console.log(res)
					// 	}, fail: err => {
					// 		console.log(err)
					// 	}
					// })
					this.$refs.painter.canvasToTempFilePathSync({
					  fileType: "jpg",
					  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					  pathType: 'url',
					  quality: 1,
					  success: (res) => {
					    console.log(res.tempFilePath);
					    // 非H5 保存到相册
					    // H5 提示用户长按图另存
					    uni.saveImageToPhotosAlbum({
					        filePath: res.tempFilePath,
					        success: function () {
					            console.log('save success');
								uni.$u.toast("海报已保存")
					        }
					    });
					  },
					});
				}
			},
			changeSpec(item,index){
				this.specIndex = index;
				this.params.spec = item.name;
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:"4000222798"
				})
			},
			toConfirm(){
				let token = uni.getStorageSync('token') || 0;
				if(token){
					if(this.detailObj.stock != 0){
						this.showBuy = false;
						let param = JSON.stringify(this.params)
						uni.navigateTo({
							url:"/pagesIndex/goods/confirm?param="+param
						})
					}else{
						uni.$u.toast("暂无库存")
					}
					
				}else{
					this.toLogin()
				}
			},
			toShare(){
				let token = uni.getStorageSync('token') || 0;
				if(token){
					if(this.identity > 1){
						this.showPosters = true;
						// uni.navigateTo({
						// 	url:"/pagesIndex/goods/share?id="+this.detailObj.id
						// })
					}else{
						uni.$u.toast("用户身份不可推荐")
					}
					
				}else{
					this.toLogin()
				}
			},
			// 适应轮播图高度
			adaptCarouselHeight(e) {
			    let imgWidth = e.detail.width;
			    let imgHeight = e.detail.height;
			    let screenWidth = uni.getSystemInfoSync().screenWidth;
			    // let ratio = (screenWidth - screenWidth/750*60) / imgWidth;
			    let ratio = screenWidth / imgWidth;
			    this.carouselHeight = imgHeight * ratio;
			}
		},
		onShareAppMessage(e){
			let id = "";
			console.log(e);
			if(e.target && e.target.id){
				id = e.target.id;
			}
			this.showPosters = false
			let pages = getCurrentPages()
			let prePage = pages[pages.length - 1];
			console.log(prePage);
			return{
				title:this.detailObj.name,
				path:`/${prePage.route}?id=${this.params.goods_id}&uid=${id}`
			}
		},
		onShareTimeline() {
			return{
				query:`id=${this.params.goods_id}`
			}
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	.goodsInfoBox{
		background-color: #FFFFFF;
		padding: 16rpx;
		margin: 0rpx 0rpx 32rpx 0rpx;
		.goodsInfoTop{
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.goodsMoney{
				font-weight: 600;
				font-size: 34rpx;
				color: #2BA777;
				display: flex;
				align-items: center;
				.money1{
					font-weight: 400;
					font-size: 24rpx;
					color: #aaa;
					// text-decoration: line-through;
					// margin-left: 16rpx;
				}
			}
			.goodsSale{
				font-weight: 400;
				font-size: 24rpx;
				color: #A1A5AA;
			}
		}
		.goodsName{
			font-weight: 600;
			font-size: 28rpx;
			color: #000;
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.shareBox{
				margin-left: 16rpx;
				flex-shrink: 0;
			}
		}
	}
	.goodsDetailBox{
		margin: 0rpx 24rpx 14rpx 24rpx;
	}
	.detailBox{
		color: #A1A5AA;
		padding: 0 24rpx;
		.detailTitle{
			font-size: 30rpx;
		}
		.detailContent{
			font-size: 28rpx;
		}
	}
	.submitBox{
		height: calc(130rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		.kefuBox{
			width: 10%;
			height: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.kefu{
				color: #A1A5AA;
				font-size: 20rpx;
				font-weight: 600;
				margin-top: 4rpx;
			}
		}
		.buyBtn{
			width: 80%;
			height: 80rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #2BA777;
			border-radius: 40rpx;
			letter-spacing: 4rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btnHover{
			background-color: #37d898;
		}
		button::after {
		  border: none !important;
		  // padding: 0 !important;
		  margin: 0 !important;
		}
		button {
		  background-color: transparent !important;
		  padding: 0 !important;
		  line-height: inherit !important;
		  margin: 0 !important;
		  // width: auto !important;
		  font-weight: 500 !important;
		  border-radius: none !important;
		}
	}
	.goodsBuyBox{
		height: 70vh;
		background-color: #fff;
		padding: 0rpx 24rpx;
		position: relative;
		.goodsInfoPopupBox{
			background-color: #fff;
			border-bottom: 2rpx solid #E7E8E9;
			padding-top: 24rpx;
			padding-bottom: 16rpx;
			display: flex;
			align-items: center;
			position: sticky;
			top: 0rpx;
			z-index: 999;
			.goodsImage{
				width: 192rpx;
				height: 192rpx;
				font-size: 0%;
				border-radius: 16rpx;
				margin-right: 16rpx;
				overflow: hidden;
			}
			.goodsInfoDetail{
				flex: 1;
				height: 192rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.goodsInfoName{
					font-weight: 600;
					font-size: 28rpx;
					color: #000;
				}
				.goodsInfoMoney{
					font-weight: 600;
					font-size: 34rpx;
					color: #2BA777;
					display: flex;
					align-items: center;
					.money1{
						font-size: 30rpx;
						color: #aaa;
						text-decoration: line-through;
						margin-right: 16rpx;
					}
				}
				.goodsInfoStock{
					font-weight: 400;
					font-size: 24rpx;
					color: #000;
				}
			}
		}
		.scrollView{
			margin-top: 16rpx;
			.title{
				font-weight: 600;
				font-size: 32rpx;
				color: #000;
			}
			.specBox{
				margin: 16rpx 0 32rpx 0;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.specItem{
					min-height: 80rpx;
					color: #000;
					background-color: #f4f4f5;
					border: 2rpx solid #f4f4f5;
					border-radius: 16rpx;
					padding: 4rpx;
					padding-left: 24rpx;
					padding-right: 24rpx;
					margin-bottom: 16rpx;
					margin-right: 16rpx;
					display: flex;
					align-items: center;
					&:last-of-type{
						margin-right: 0rpx;
					}
					.specImage{
						font-size: 0%;
						border-radius: 8rpx;
						overflow: hidden;
					}
					.specContent{
						font-weight: 400;
						font-size: 28rpx;
					}
				}
				.active{
					color: #2BA777;
					background-color: #ebfaeb;
					border: 2rpx solid #2BA777;
				}
			}
			.popupLine{
				margin-bottom: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.lineTitle{
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
				}
			}
		}
	}
	.postersBox{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		.postersBottom{
			background-color: #fff;
			padding-top: 24rpx;
			.menuBox2{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				.menuItem2{
					width: 33%;
					margin-bottom: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.imageBox2{
						width: 100rpx;
						height: 100rpx;
						font-size: 0%;
						// background-color: #fff6f2;
						border-radius: 50%;
						// box-shadow: 0rpx 0rpx 4rpx #555;
						margin-bottom: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.menuText2{
						font-size: 28rpx;
						// letter-spacing: 2rpx;
					}
				}
			}
			.cancalBox{
				width: 100vw;
				height: calc(80rpx + env(safe-area-inset-bottom));
				background-color: #fff;
				border-top: #ebebec solid 2rpx;
				letter-spacing: 4rpx;
				padding-bottom: env(safe-area-inset-bottom);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	button::after {
	  border: none !important;
	  // padding: 0 !important;
	  // margin: 0 !important;
	}
	button {
	  background-color: transparent !important;
	  padding: 0 !important;
	  line-height: inherit !important;
	  // margin: 0 !important;
	  // width: auto !important;
	  font-weight: 400 !important;
	  border-radius: none !important;
	}
}
</style>
<style>
	page{
		background-color: #f7f8fa;
	}
</style>